<template>
  <el-select
    :name="field"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :max-collapse-tags="maxCollapseTags"
    class="w-full"
    filterable
    clearable
    @change="handleChange"
  >
    <template v-if="options[0] && options[0].hasOwnProperty('options')">
      <el-option-group v-for="group in options" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-option-group>
    </template>
    <template v-else>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </template>
  </el-select>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'MSelect',
  })

  /**
   * TODO: props 中不能包含 modelValue ? 会导致 el-select 无法选择？
   */
  const props = withDefaults(
    defineProps<{
      field: string
      options: any[]
      collapseTags?: boolean
      maxCollapseTags?: number
      collapseTagsTooltip?: boolean
      size?: string
    }>(),
    {
      options: () => [],
      collapseTags: true,
      maxCollapseTags: 3,
      collapseTagsTooltip: true,
      size: 'default',
    }
  )

  // console.log('MSelect setup:', props)

  // const emits = defineEmits<{
  //   (e: 'update:modelValue', data: any): void
  // }>()
  //
  const handleChange = (values: any) => {
    // console.log('handleChange', values)
    //   values = values !== undefined ? values : ''
    //   emits('update:modelValue', values)
  }
</script>
